<script setup>
import { onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import { getPie3DOption } from '../../info-house-overview/left/getPie3DOption'
import {
  getRealtyOverview,
  getRealtyLevel,
  getTop10
} from '../api.js'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const propertyCompanyOverview = ref([
  {
    name: '本地企业数',
    value: 0,
  },
  {
    name: '物业协会加入企业数',
    value: 0,
  },
  {
    name: '外地企业数',
    value: 0,
  },
  {
    name: '物业项目数',
    value: 0,
  }
])

const renterChartRef = ref(null)

const updateChartPie = (data) => {
  const colors = ['#00d7e9', '#41c1ff']
  const pieData = data?.charts?.map((e, i) => {
    return {
      name: e.type,
      value: e.count,
      selected: i === 0,
      itemStyle: {
        opacity: 0.9,
        color: colors[i]
      }
    }
  })
  if (pieData) {
    const option = getPie3DOption(pieData, '')
    renterChartRef.value?.updateOption(option)
  }
}

const updateDataOverview = (data) => {
  data.type.forEach((item) => {
    const one = propertyCompanyOverview.value.find((e) => e.name === item.type)
    if (one) { 
      one.value = item.count
    }
  })

  updateChartPie(data)
}

const getBarChartOption = (data) => {
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '',
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00D1FE' // 0% 处的颜色
            }, {
                offset: 1, color: '#034D82' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.data, 
      },
    ]
  }
}
const propertyItemLevelChartBarRef = ref(null)
const updateChartBar = (res) => {
  const data  = {
    xAxis: res.type,
    data: res.value,
  }
  propertyItemLevelChartBarRef.value?.updateOption(getBarChartOption(data))
}

const tableData = ref([{ name: '-', num: 0 }])
const updateTableData = (data) => {
  tableData.value = data?.top?.map((e) => ({ name: e.type, num: e.count}))
}
const reqData = () => {
  Promise.all([
    getRealtyOverview(),
    getRealtyLevel(),
    getTop10()
  ]).then(([overview, level, top10]) => {
    if (overview.success) {
      updateDataOverview(overview.data)
    }
    if (level.success) {
      updateChartBar(level.data)
    }
    if (top10.success) {
      updateTableData(top10.data)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="物业企业" class="total-card">
      <div class="section">
        <div class="section-title">＞ 物业项目信息</div>
        <div class="overview-wrap">
          <div class="overview-box" v-for="item in propertyCompanyOverview" :key="item.name">
            {{ item.name }}
            <span class="overview-value">{{ item.value }}</span>
          </div>
        </div>
        <div class="chart">
          <draw-echarts
            ref="renterChartRef"
            width="420"
            height="140"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>

      <div class="section">
        <div class="section-title">＞ 物业项目等级分布</div>
        <div class="chart">
          <draw-echarts
            ref="propertyItemLevelChartBarRef"
            width="420"
            height="200"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>

      <div class="section">
        <div class="section-title">＞ 物业企业信息Top10</div>
        <div class="table-wrap">
          <!-- <div class="table-prev-sell"> -->
            <el-scrollbar style="height: 280px;">
              <div class="tr th">
                <div class="name td">物业企业</div>
                <div class="num td">项目数</div>
              </div>
              <div class="tr" v-for="(item, index) in tableData" :key="index">
                <div class="name td">
                  <el-tooltip :content="item.name"  placement="top" effect="light">
                    {{ item.name }}
                  </el-tooltip>
                </div>
                <div class="area td">
                  <el-tooltip :content="String(item.num)"  placement="top" effect="light">
                    {{ item.num }}
                  </el-tooltip>
                </div>
              </div>
              <div class="no-data" v-if="!tableData.length">暂无数据</div>
            </el-scrollbar>
          <!-- </div> -->
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .total-card {
    height: 410px;
    margin-bottom: var(--card-margin-bottom);

    .section-title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }
    .section:not(:first-child) .section-title {
      margin-top: 12px;
    }

    .overview-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .overview-box {
        position: relative;
        margin-bottom: 5px;
        padding-left: 12px;
        width: 48%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
      
        text-align: left;
        color: #eee;

        background: linear-gradient(to right, #044e79 0%, #063254 50%, #081a3400 100%);
        border: solid 1px;
        border-image: linear-gradient(90deg, #00EDF4, #081731) 1;
        border-right: none;
        .overview-value {
          position: relative;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }
}
</style>
